<template>
  <div class="search-form">
    <a-form :model="form" @submit="handleSubmit" label-col-flex="50px">
      <a-row :gutter="8">
        <a-col :span="6">
          <a-form-item field="keyword" label="姓名/手机号" label-col-flex="100px">
            <a-input v-model="form.keyword" placeholder="姓名/手机号" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="licenseType" label="证型">
            <a-select v-model="form.licenseType" placeholder="证型" allow-clear>
              <a-option :value="item.value" v-for="item in licenseTypeList" :key="item.value">
                {{ item.label }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="latestFollowUpUserIdList" label="跟进人">
            <a-select v-model="form.latestFollowUpUserIdList" multiple placeholder="跟进人" allow-clear>
              <a-option :value="item.value" v-for="item in followList" :key="item.value">
                {{ item.label }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="status" label="状态">
            <a-select v-model="form.status" placeholder="状态" allow-clear>
              <a-option :value="item.value" v-for="item in statusList" :key="item.value">
                {{ item.label }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="sourceTerminal" label="来源">
            <a-select v-model="form.sourceTerminal" placeholder="来源" allow-clear>
              <a-option :value="item.value" v-for="item in sourceList" :key="item.value">
                {{ item.label }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="inputTime" label="录入日期">
            <a-range-picker format="YYYY-MM-DD" v-model="form.inputTime" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-button type="primary" html-type="submit">搜索</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

let licenseTypeList = [
  {
    label: 'C1',
    value: 'C1',
  },
  {
    label: 'C2',
    value: 'C2',
  },
]
let followList = [
  {
    label: '张三',
    value: '1',
  },
  {
    label: '李四',
    value: '2',
  },
]
let statusList = [
  {
    label: '新创建',
    value: 0,
  },
  {
    label: '跟进中',
    value: 1,
  },
  {
    label: '已报名',
    value: 2,
  },
  {
    label: '已失效',
    value: 3,
  },
]
let sourceList = [
  {
    label: '学员端',
    value: 1,
  },
  {
    label: '教职端',
    value: 2,
  },
  {
    label: '平台端',
    value: 3,
  },
]
const form = reactive({
  keyword: '',
  licenseType: '',
  latestFollowUpUserIdList: [],
  status: '',
  sourceTerminal: '',
  inputTime: [],
})

function handleSubmit() {
  console.log(form)
}
</script>

<style scoped lang="less">
.search-form {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}
</style>
